<template>
  <view class="viewport">
    <scroll-view
      class="scroll-view"
      :refresher-triggered="refreshing"
      scroll-y="true"
      lower-threshold="20"
      @scrolltolower="onScrollToLower"
      @refresherrefresh="onRefresh"
    >
      <view class="warp">
        <view class="port">
          <view class="title">
            <fui-section
              title="基础信息"
              fontWeight="500"
              descrSize="25"
              color="#666"
              lineWidth="4px"
              isLine
            ></fui-section>
          </view>
          <view class="li">
            <view class="left">工单单号</view>
            <view class="right">{{ detail?.repairCode }}</view>
          </view>
          <view class="li">
            <view class="left">工单主题</view>
            <view class="right">{{ detail?.repairSubject }}</view>
          </view>
          <view class="li">
            <view class="left">工单类型</view>
            <view class="right">{{ detail?.repairType }}</view>
          </view>
          <view class="li">
            <view class="left">派工人员</view>
            <view class="right">{{ detail?.repairStaff }}</view>
          </view>
          <view class="li">
            <view class="left">所在部门</view>
            <view class="right">{{ detail?.deptName }}</view>
          </view>
          <view class="li">
            <view class="left">派工时间</view>
            <view class="right">{{ detail?.assignTime }}</view>
          </view>
          <view class="li">
            <view class="left">维修班组</view>
            <view class="right">{{ detail?.repairTeam }}</view>
          </view>
          <view class="li">
            <view class="left">负责人</view>
            <view class="right">{{ detail?.repairManager }}</view>
          </view>
          <view class="li">
            <view class="left">其他维修人员</view>
            <view class="right">{{
              detail?.workloadList?.map((item) => item.workerName).join("、")
            }}</view>
          </view>
          <view class="li">
            <view class="left">备注</view>
            <view class="right">{{ detail?.remark }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  detail: {
    type: Object,
    default: () => null,
  },
});

const refreshing = ref(false);
const onScrollToLower = () => {};
const onRefresh = () => {};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: skyblue;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  height: 100%;
}
.warp {
  padding-bottom: 30rpx;
  .title {
    border-bottom: 1px solid #ccc;
    height: 70rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
  }
  .port {
    background-color: #fff;
    margin-bottom: 20rpx;
    .li {
      display: flex;
      align-items: center;
      height: 100rpx;
      padding-left: 40rpx;
      .right {
        margin-left: 30rpx;
        color: #cbb8b8;
      }
    }
  }
}
</style>
